<template>
  <div>
    <h1>单选框</h1>
    <el-radio @change="aa" v-model="radio" label="1" border size="medium">备选项1</el-radio>
    <el-radio @change="aa" disabled v-model="radio" label="2" border size="small">备选项2</el-radio>
    <el-radio @change="aa" v-model="radio" label="3" border size="mini">备选项3</el-radio>
    <h1>单选框组</h1>
    <el-radio-group v-model="radioGroup" @change="bb" >
        <el-radio label="3"  border size="medium">备选项</el-radio>
        <el-radio label="6"  border size="small">备选项</el-radio>
        <el-radio label="9"  border size="mini">备选项</el-radio>
    </el-radio-group>
    <h1>按钮样式</h1>
     <div>
        <el-radio-group v-model="radio1">
          <el-radio-button label="上海" text-color="#CCCCCC"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio2" size="medium">
          <el-radio-button label="上海" ></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio3" size="small">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京" disabled ></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio4" disabled size="mini">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
  </div>
</template>

<script>
  export default {
    name: "Radio",
     data () {
          return {
            radio: '1',
            radioGroup: "3",
             radio1: '1',
             radio2: '1',
             radio3: '1',
             radio4: '1'
          };
        },
    methods:{
      aa(){
        console.log(this.radio);
      },
      bb(){               
        console.log(this.radioGroup);
      }
    }
  }
</script>

<style>
</style>
